<!DOCTYPE html>
<html lang="zh-cn">
<head>
<link href="/static/js/plugins/layui/css/layui.css" rel="stylesheet">
    <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/static/css/animate.min.css" rel="stylesheet">
    <link href="/static/css/style.min.css?v=4.1.0" rel="stylesheet">
    
<script src="/static/js/jquery-1.7.2.min.js"></script>
<script src="/static/js/jquery.ajax.upload.js"></script>
<script src="/static/js/plugins/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/plugins/layer/layer.min.js"></script>
<style type="text/css">
.demo{width:420px; margin:30px auto}
.demo p{line-height:32px}
.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
.files{height:22px; line-height:22px; margin:10px 0}
.delimg{margin-left:20px; color:#090; cursor:pointer}
</style>
</head>

<body>
<h1>上传文件</h1>

<!--上传代码来自 http://www.helloweba.com/demo/upload/-->
   <div class="demo">
        <p>说明：上传文件所有成员都可查看，文件大小不能超过50M。</p>
        <div class="btn">
            <span>添加文件</span>
            <input id="fileupload" type="file" name="upfile">
        </div>
        <div class="progress">
            <span class="bar"></span><span class="percent">0%</span >
        </div>
        <div class="files"></div>
        <div id="showimg"></div>
   </div>

<script type="text/javascript">
$(function () {
    var bar = $('.bar');
    var percent = $('.percent');
    //var showimg = $('#showimg');
    var progress = $(".progress");
    var files = $(".files");
    var btn = $(".btn span");
    $("#fileupload").wrap("<form id='myupload' action='{:url('upload/upfile')}' method='post' enctype='multipart/form-data'></form>");
    $("#fileupload").change(function(){
        $("#myupload").ajaxSubmit({
            dataType:  'json',
            beforeSend: function() {
                //showimg.empty();
                progress.show();
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
                btn.html("上传中...");
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            success: function(data) {
                //files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");
                //var img = "http://demo.helloweba.com/upload/files/"+data.pic;
                //showimg.html("<img src='"+img+"'>");

                layer.msg('上传成功！');
                //parent.F5();
                parent.upload_file_deal(data.id);
                //files.html(xhr.responseText);
            },
            error:function(xhr){
                btn.html("上传失败");
                bar.width('0')
                files.html(xhr.responseText);
            }
        });
    });

});
</script>
</body>
</html>